<h1 mat-dialog-title>Qemu image configurator</h1>

<div class="modal-form-container">
  <div class="content">
    <div class="default-content">
      <mat-card class="matCard">
        <form [formGroup]="inputForm">
          <mat-form-field class="form-field">
            <input
              matInput
              type="text"
              [(ngModel)]="qemuImg.qemu_img"
              formControlName="qemu_img"
              placeholder="Qemu image path"
            />
          </mat-form-field>
        </form>
        <mat-form-field class="form-field">
          <mat-select placeholder="Image format" [(ngModel)]="qemuImg.format">
            <mat-option *ngFor="let format of formatOptions" [value]="format">
              {{ format }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <div *ngIf="qemuImg.format === 'qcow2'">
          Size options
          <mat-form-field class="form-field">
            <mat-select placeholder="Image format" [(ngModel)]="qemuImg.preallocation">
              <mat-option *ngFor="let preallocation of preallocationsOptions" [value]="preallocation">
                {{ preallocation }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field class="form-field">
            <mat-select placeholder="Cluster size" [(ngModel)]="qemuImg.cluster_size">
              <mat-option *ngFor="let clusterSize of clusterSizeOptions" [value]="clusterSize.value">
                {{ clusterSize.name }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          Refcounts
          <mat-form-field class="form-field">
            <mat-select placeholder="Lazy refcounts" [(ngModel)]="qemuImg.lazy_refcounts">
              <mat-option *ngFor="let lazyRefcount of lazyRefcountsOptions" [value]="lazyRefcount">
                {{ lazyRefcount }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field class="form-field">
            <mat-select placeholder="Refcount entry size" [(ngModel)]="qemuImg.refcount_bits">
              <mat-option *ngFor="let clusterSize of clusterSizeOptions" [value]="clusterSize.value">
                {{ clusterSize.name }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div *ngIf="qemuImg.format === 'vhd' || qemuImg.format === 'vdi'">
          <mat-radio-group aria-label="Image file sizing mode" class="radio-selection">
            <mat-radio-button value="1" (click)="setSubformat('dynamic')" checked>Dynamic</mat-radio-button>
            <mat-radio-button value="2" (click)="setSubformat('fixed')">Fixed</mat-radio-button>
          </mat-radio-group>
        </div>
        <div *ngIf="qemuImg.format === 'vmdk'">
          Adapter type<br />
          <mat-radio-group aria-label="Adapter type" class="radio-selection">
            <mat-radio-button value="1" (click)="setAdapterType('ide')" checked>IDE</mat-radio-button>
            <mat-radio-button value="2" (click)="setAdapterType('lsilogic')">LSI Logic</mat-radio-button>
            <mat-radio-button value="3" (click)="setAdapterType('buslogic')">BusLogic</mat-radio-button>
            <mat-radio-button value="4" (click)="setAdapterType('legacyESX')"
              >Legacy (ESX)</mat-radio-button
            > </mat-radio-group
          ><br /><br />
          Image file sizing mode<br />
          <mat-radio-group aria-label="Image file sizing mode" class="radio-selection">
            <mat-radio-button value="1" (click)="setSubformat('streamOptimized')" checked
              >Stream optimized</mat-radio-button
            >
            <mat-radio-button value="2" (click)="setSubformat('twoGbMaxExtentSparse')"
              >Split every 2GB (sparse)</mat-radio-button
            >
            <mat-radio-button value="3" (click)="setSubformat('twoGbMaxExtentFlat')"
              >Split every 2GB (flat)</mat-radio-button
            >
            <mat-radio-button value="4" (click)="setSubformat('monolithicSparse')">Monolithic sparse</mat-radio-button>
            <mat-radio-button value="5" (click)="setSubformat('monolithicFlat')"
              >Monolithic flat</mat-radio-button
            > </mat-radio-group
          ><br /><br />
          <mat-select placeholder="Zeroed grain" [(ngModel)]="qemuImg.zeroed_grain">
            <mat-option *ngFor="let option of zeroedGrainOptions" [value]="option">
              {{ option }}
            </mat-option>
          </mat-select>
        </div>
        <form [formGroup]="inputForm">
          <mat-form-field class="form-field">
            <input matInput type="text" [(ngModel)]="qemuImg.path" formControlName="path" placeholder="File location" />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input matInput type="number" [(ngModel)]="qemuImg.size" formControlName="size" placeholder="Disk size" />
          </mat-form-field>
        </form>
      </mat-card>
    </div>
  </div>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>
